import * as React from "react";
import { createStyles, makeStyles } from "@material-ui/styles";
import { inject, observer } from "mobx-react";
import { USER } from "../mobx/Stores";
import { User } from "../mobx/data/User";
import { Button } from "antd";
import Box from "../components/Box";

const useStyles = makeStyles(createStyles<"root" | "div", {}>(
  {
    root: {
      marginTop: 20
    },
    div: {}
  }
));

interface Iprops {
  user?: User;
}

/**
 * 描述：
 *  用户信息
 * @author sunshixiong
 * @date 2019/6/26-16:07
 */
const UserInfo: React.FC<Iprops> = (props: Iprops) => {
  const classes = useStyles();
  return (
    <React.Fragment>
      <div className={ classes.root }>{ props.user!.user }</div>
      <Box border={ 20 }>孙世雄</Box>
      <Button
        onClick={ e => {
          props.user!.getUserInfo();
        } }
      >
        hello
      </Button>
    </React.Fragment>
  );
};

export default inject(USER)(observer(UserInfo));
